<template>
  <div class="prodetail">
    <Back title="菜谱详情" :sticky="true" />
    <div class="detail-box">
      <div class="detail-img">
        <img :src="detaildata.thumb_path" alt="" />
      </div>
      <div class="pro-name">{{ detaildata.title }}</div>
      <div class="tips">{{ detaildata.tips }}</div>

      <div>
        <van-tag type="primary" color="#FFB31A">精品</van-tag>
        <van-tag type="primary" color="#FF4C44">独家</van-tag>
      </div>
      <div class="authoruser">
        <div class="user-img">
          <img :src="detaildata.user.user_photo" alt="" />
        </div>
        <div class="user-msg">
          <div class="user-lv">Lv：{{ detaildata.user.lvl }}</div>
          <div class="user-name">{{ detaildata.user.nickname }}</div>
        </div>
      </div>
      <div class="text">发布于：{{ detaildata.create_time }}</div>
      <div class="text">营养成分：</div>
      <div></div>
      <div class="text">用料：</div>
      <div class="detail">
        <div class="detail-grid" v-for="(item, index) in yldata" :key="index">
          <div>{{ item.title }}</div>
          <div>{{ item.note }}</div>
        </div>
      </div>
      <div class="text">做法：</div>
      <div class="detail-practice" v-for="(item, index) in fbdata" :key="index">
        <div class="practice-img">
          <img :src="item.image" alt="" />
        </div>
        <div class="practice-text">{{ item.content }}</div>
      </div>
      <a class="jk" :href="detaildata.nutrition_facts_hint_text_url">{{
        detaildata.nutrition_facts_hint_text
      }}</a>
      <div class="review">
        <div class="review-title">评论：</div>
        <div class="sendreview">
          <div class="author">
            <div class="senduser">
              <!-- <img :src="reviewdata." alt="" /> -->
            </div>
            <div class="sendbox">
              <div class="sendipt">
                <van-field
                  v-model="message"
                  rows="2"
                  autosize
                  type="textarea"
                  placeholder="请输入评论"
                  show-word-limit
                />
              </div>
              <div class="send-btn">
                <van-button plain >发表评论</van-button>
              </div>
            </div>
          </div>
          <div
            class="reviewbox"
            v-for="(item, index) in reviewdata"
            :key="index"
          >
            <div class="user-review">
              <div class="user-img">
                <img :src="item.author.p" alt="" />
              </div>
              <div class="re-content">
                <div class="re-name">
                  {{ item.author.n }}
                </div>
                <div class="content-text">{{ item.title }}</div>
                <div class="content-img">
                  <img :src="item.image_u" alt="" />
                </div>
              </div>
            </div>
            <div class="re-remove">
              <a href="#">回复</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
export default {
  name: "Detail",
  components: {
    Back,
  },
  data() {
    return {
      detaildata: [],
      yldata: [],
      fbdata: [],
      id: "",
      message: "",
      // 评论数据
      reviewdata: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail(this.id);
  },
  methods: {
    getDetail() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/douguo/recipe/detail/" + `${this.id}`,
      })
        .then((res) => {
          console.log("this.id==>", this.id);
          this.detaildata = res.data.result.recipe;
          this.yldata = res.data.result.recipe.major;
          this.fbdata = res.data.result.recipe.cookstep;
          // console.log(' this.detaildata==>', this.detaildata);
          console.log("res==>", res);

          // console.log(' this.detaildata==>', this.detaildata);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/douguo/recipe/relatedinfo/" + `${this.id}`,
      })
        .then((res) => {
          // this.userdata = res.data.result
          this.reviewdata = res.data.result.notes;
          console.log("评论res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 19px;
  font-weight: bold;
  padding: 10px 3px;
}
.detail-img {
  width: 100%;
  height: 300px;
}
.detail-img img {
  height: 100%;
  width: 100%;
}
.pro-name {
  font-size: 26px;
  font-weight: bold;
  margin: 15px 5px 10px 5px;
  color: #ff0505;
}
.van-tag--primary {
  margin: 5px;
}
.detail {
  width: 98%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}
.detail-grid {
  display: flex;
  justify-content: space-around;
  width: 49%;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  border: 1px solid #666;
  margin: 0 1px 0 0;
  color: #ff0505;
  font-size: 15px;
}
.detail-practice {
  display: flex;
  margin: 10px 5px;
  padding: 5px;
}
.practice-img {
  width: 40%;
  height: 150px;
}
.practice-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.practice-text {
  width: 50%;
  word-wrap: break-word;
  margin: 10px;
  font-size: 15px;
}
.review {
  width: 100%;
  height: 300px;
  .review-title {
    font-size: 23px;
    padding: 10px;
  }
  .sendreview {
    background-color: #fff;
  }
  .user {
    display: flex;
    .senduser {
      width: 20%;
      height: 50px;
    }
    .senduser img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
    .sendbox {
      width: 75%;
      margin-left: 5px;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.3);
    }
    /deep/.van-field__control::placeholder {
      font-size: 14px;
    }
    .sendipt {
      width: 100%;
    }
  
  }
    /deep/.van-button--plain{
      width: 80px;
      padding: 1px;
      height: 30px;
      left: 72%;
      top: 35px;
      border: 1px solid #FDA12C;
      color: rgb(194, 18, 115);
      font-weight: bold;
    }
  .reviewbox {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 50px;
    .user-review {
      display: flex;
      margin-top: 50px;
      .user-img {
        width: 20%;
        height: 100px;
      }
      .user-img img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-top: -3px;
      }
      .re-content {
        margin: 0 15px;
        .re-name {
          font-size: 18px;
        }
        .content-text {
          font-size: 14px;
          padding: 10px 0;
        }
      }
    }
    .re-remove {
      position: absolute;
      font-size: 15px;
      bottom: 20px;
      right: 15px;
    }
  }
}
.authoruser {
  display: flex;
}
.user-img {
  margin: 5px;
}
.user-lv {
  font-size: 15px;
  margin: 15px 0 10px 0;
}
.user-name {
  font-size: 23px;
  background-image: linear-gradient(135deg, red, blue);
  background-clip: text;
  color: transparent;
}
.user-img img {
  border-radius: 10px;
}
.tips{
  font-size: 14px;
}
.jk{
 font-size: 14px;
 float: right;
}
</style>